<script setup lang="ts">
import request from "@api";
import { useStore } from "@/store";
import defaultPic from "@imgs/user_default.webp";
import { reactive, ref } from "@vue/reactivity";
import { ElMessageBox, ElNotification } from "element-plus";
import { useRouter } from "vue-router";
const store = useStore();
const props = defineProps({
  id: {
    type: [Number, String],
    required: true,
  },
});

const emit = defineEmits({
  initData: null,
});

const $router = useRouter();

let condition = reactive({
  id: props.id,
  pageSize: 10,
  pageNum: 1,
});

let list = ref([]);
let total = ref(0);

function getBlogListByUserId() {
  request["check/getFocusList"]({
    params: condition,
  }).then((res: any) => {
    if (res.code == 200) {
      list.value = res.data.list;
      total.value = res.data.total;
      condition.pageNum = res.data.pageNum;
      condition.pageSize = res.data.pageSize;
    }
  });
}
function sizeChange(val: number) {
  condition.pageSize = val;
  getBlogListByUserId();
}

function currentChange(val: number) {
  condition.pageNum = val;
  getBlogListByUserId();
}

function toDetail(row: any) {
  $router.push({
    name: "blogDetail",
    params: {
      id: row.id,
    },
  });
}

function handlerCancel(row: any) {
  ElMessageBox.confirm("确认要取消嘛？", "取消确认", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      request["check/operateFocus"]({
        data: { id: row.focusId, type: "0" },
      }).then((res: any) => {
        if (res.code == 200) {
          ElNotification({
            type: "success",
            message: res.msg,
            showClose: false,
          });
          emit("initData");
          getBlogListByUserId();
        } else {
          ElNotification({
            type: "error",
            message: res.msg,
            showClose: false,
          });
        }
      });
    })
    .catch(() => {});
}

getBlogListByUserId();
</script>

<template>
  <div class="blogs_box">
    <div class="bloger_list">
      <div class="item" v-for="item in list" :key="item.id">
        <img :src="item.focus.userPic || defaultPic" alt="" />
        <div class="name">
          {{ item.focus.username || item.focus.phoneNumber }}
        </div>
        <div class="tools" v-if="store.currentUser.id != item.id">
          <span @click="handlerCancel(item)">取关</span>
        </div>
      </div>
    </div>

    <div class="pagination">
      <el-pagination
        background
        :page-sizes="[10, 20, 30, 40, 50]"
        layout="prev, pager, next , sizes , total"
        :total="total"
        @current-change="currentChange"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>



<style lang="scss" scoped>
.blogs_box {
  height: 100%;
  .bloger_list {
    height: calc(100% - 80px);
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 140px;
      height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px;
      padding-bottom: 30px;
      position: relative;
      margin-right: 10px;
      margin-bottom: 15px;
      overflow: hidden;
      background-color: #f8f8f8;
      border-radius: 4px;
      .myself,
      .unreadCount {
        position: absolute;
        right: 0px;
        top: 0px;
        background-image: linear-gradient(45deg, #7d84fe, #9cd8ff);
        color: #fff;
        padding: 2px 4px;
        font-size: 14px;
        border-bottom-left-radius: 4px;
      }
      .unreadCount {
        background-image: linear-gradient(45deg, #ffbe16, #ffe356);
      }
      img {
        width: 45px;
        height: 45px;
      }
      .tools {
        width: 100%;
        position: absolute;
        bottom: -30px;
        left: 0px;
        display: flex;
        transition: all 0.2s;
        span {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          flex: 1;
          text-align: center;
          cursor: pointer;
          user-select: none;
          background-color: #7d84fe;
          color: #fff;
          &:nth-of-type(1) {
            border-right: 1px solid #fff;
          }
        }
      }
      .name {
        margin-top: 10px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      &:hover {
        .tools {
          bottom: 0px;
        }
      }
    }
  }
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
  }
}
</style>